import React from "react";
import logo from "../logo.svg";

function Footer() {
  const nav_links = ["Terms", "Privacy", "About", "Blog"];
  const nav_logos = Array.from({ length: 4 }).fill(logo);
  const nav_items = ["Supported IDEs", "Leaderboard", "Status", "Help"];

  return (
    <div style={{ paddingLeft: 200 }} className="pb-16 pl-50 mt-8">
      <div className="border-b border-gray-300"></div>
      <div className="grid grid-cols-12 mt-16 text-sm">
        <div className="col-span-5">
          <ul className="flex justify-start flex-wrap px-4">
            <li className="text-gray-500 mx-1">© 2022 WakaTime</li>
            {nav_links.map((link, i) => (
              <li key={i} className="mx-1">
                <a href="#" style={{ color: "#337ab7" }} className="hover:underline hover:!text-sky-900">
                  {link}
                </a>
              </li>
            ))}
          </ul>
        </div>
        <div className="col-span-2">
          <ul className="flex justify-center flex-wrap px-4">
            {nav_logos.map((logo, i) => (
              <li key={i} className="m-1">
                <a href="#" className="w-auto h-auto">
                  <img src={logo} className="w-5 h-5 rounded-sm bg-sky-700 hover:!bg-sky-900" />
                </a>
              </li>
            ))}
          </ul>
        </div>
        <div className="col-span-5">
        <ul className="flex justify-end flex-wrap px-4">
            {nav_items.map((item, i) => (
              <li key={i} className="mx-1">
                <a href="#" style={{ color: "#337ab7" }} className="hover:underline hover:!text-sky-900">
                  {item}
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}

export default Footer;
